<template>
  <view class="container titleNview-placing">
	  <view class="mask" v-show="indexDialog">
	  	<view class="mask_content">
	  		<image @click="handleClosemask" src="../../static/image/cancel.png" class="cancel"></image>
	  		<view class="content_left" v-for="(item,index) in dialoglist" :key="index" @click="handleChooseway(item,index)">
	  			<view class="content_scan">
	  				<view class="all_content">
	  					<view class="img">
	  						<image :src="item.img" class="s_img"></image>
	  					</view>
	  					<view class="text">{{ item.title }}</view>
	  				</view>
	  			</view>
	  		</view>
	  	</view>
	  </view>
	<view class="status_bar"><!--这里是状态栏--></view>
    <view class="scroll">
      <view class="scroll-view">
		<view class="top_bg">
			<image class="bg_img" src="../../static/image/top_img.png"></image>
			<view class="header">
				<view class="header_left">
					<view class="avatar">
						<image class="avatar_img" :src="userInfo.avatar"></image>
					</view>
					<view class="leavea">Lv.1</view>
				</view>
				<view class="header_right">
					<view class="first">
						<view class="first_left">昵称：{{ userInfo.nickname }}</view>
						<view class="first_right"><image class="edit_img" src="../../static/image/edit.png" mode="aspectFill"></image></view>
					</view>
					<view class="second">ID:{{ userInfo.mobile }}</view>
					<view class="third">有效期至 <text class="text">2021-02-22</text></view>
				</view>
			</view>
			<view class="header_next">
				<view class="vip_btn">立即开通</view>
			</view>
		</view>
		<view class="item_list">
			<view class="item" v-for="(item,index) in listItem" :key="index" @click="handleTo(item,index)">
				<view class="item_img">
					<image :src="item.img" class="img_icon" mode="aspectFill"></image>
				</view>
				<view class="item_text">
					{{ item.text }}
				</view>
				<view class="item_right_img">
					<image src="../../static/image/right.png" class="right_img"></image>
				</view>
			</view>
		</view>
	  </view>
    </view>
    <view class="down">
		<C_Tabbar :current-page="2" @handleScanit="handleShowDialog"></C_Tabbar>
	</view>
  </view>
</template>
<script>
	import C_Tabbar from '../common/custom-tab-bar/tabbar.vue'
	export default {
		components: {
			C_Tabbar
		},
		data(){
			return {
				userInfo:'',
				user:'',
				type:2,
				indexDialog:false,
				listItem:[
					{
						img:require('../../static/image/tongji.png'),
						text:'我的统计'
					},
					{
						img:require('../../static/image/safe.png'),
						text:'账号安全'
					},
					{
						img:require('../../static/image/kefu.png'),
						text:'客服'
					},
					{
						id:2,
						img:require('../../static/image/yinsi.png'),
						text:'隐私政策'
					},
					{
						id:1,
						img:require('../../static/image/xieyi.png'),
						text:'用户协议'
					},
					{
						img:require('../../static/image/fenxian.png'),
						text:'分享'
					},
					{
						img:require('../../static/image/out.png'),
						text:'退出登录'
					}
				],
				dialoglist:[
					{
						id:0,
						title:'扫票录入',
						img:require('../../static/image/saomiao.png')
					},
					{
						id:1,
						title:'手动录入',
						img:require('../../static/image/head.png')
					}
				],
			}
		},
		created() {
			//this.user = uni.getStorageSync('storeState') || this.$store.state.user.userInfo;
			this.getUserInfo()
		},
		methods:{
			async getUserInfo(){
				let res = await this.$api.getUserInfo()
				console.log(res)
				if(res.code === 1 && res.data){
					this.userInfo = res.data
				}
			},
			handleTo(item,index){
				switch(item.text){
					case '我的统计': 
						uni.navigateTo({
							url:"/pages/count/count",
						})
					break
					case '退出登录':
						this.handleLoginout()
				}
				if(item.id === 2) {
					let id = 2;
					uni.navigateTo({
						url:'/pages/Privacy/Privacy?id='+encodeURIComponent(JSON.stringify(id))
					})
				}
				if(item.id === 1) {
					let id = 1;
					uni.navigateTo({
						url:'/pages/protocol/protocol?id='+encodeURIComponent(JSON.stringify(id))
					})
				}
			},
			async getxieyi(params){
				let res = await this.$api.getPrivacyPolicy(params) 
			},
			// getUserInfo() {
			// 	this.user = this.$store.state.user.userInfo
			// 	uni.setStorageSync('storeState',this.user)
			// },
			handleShowDialog(data){
				this.indexDialog = data
			},
			handleChooseway(item,index){
				if(index === 0) {
					uni.navigateTo({
						url:'/pages/ScanCode/ScanCode'
					})
				}else{
					uni.navigateTo({
						url:"/pages/Manualentry/Manualentry"
					})
				}
			},
			handleClosemask(){
				this.indexDialog = false
			},
			async handleLoginout(){
				let res = await this.$api.loginOut()
				if(res.code === 1){
					uni.removeStorageSync('token')
					uni.switchTab({
						url:"/pages/index/index"
					})
				}
			}
		}
	}
</script>
<style scoped lang="scss">
.container {
  position: fixed;
  width: 100%;
  background-color: #fff;
  z-index: 1;
  top: 0;
  bottom: 0;
  /* 重点是 scroll 的设置,利用定位过滤掉上、下知道的确定区域,自动铺满可变动区域*/
.titleNview-placing{
	height: var(--status-bar-height);
		padding-top: 44px;
		box-sizing: content-box;
}
		.mask{
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			background-color: rgba(0,0,0,0.6);
			z-index: 99999;
			.mask_content{
				.cancel{
					width: 20px;
					height: 20px;
					position: absolute;
					top: -20px;
					right: -5px;
				}
				width: 90%;
				height: 150px;
				position: absolute;
				left: calc(50% - 45%);
				top: 200px;
				display: flex;
				.content_left{
					flex: 0.5;
					@include centerAline();
					.content_scan{
						width: 140px;
						height: 140px;
						background-color: #FFF4F3;
						border-radius: $radius_eight;
						@include centerAline();
						.all_content{
							width: 70px;
							height: 70px;
							.img{
								width: 100%;
								height: 36px;
								display: flex;
								justify-content: center;
								.s_img{
									width: 36px;
									height: 36px;
								}
							}
							.text{
								width: 100%;
								height: 24px;
								margin-top: 4px;
								text-align: center;
								line-height: 24px;
								font-size: $font-size-16;
							}
							
						}
					}
				}
			}
		}
  .scroll {
    position: absolute;
    width: 100%;
    bottom:55px;
    top:0px;
    box-sizing: border-box;
	background-color: $bg_color;
    /* 隐藏滚动条 */
    overflow: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE10+ */
    &::-webkit-scrollbar {
      display: none; /* ChromeSafari */
    }
    .scroll-view {
      width: 100%;
	  .top_bg{
		  width: 100%;
		  height: 184px;
		  position: relative;
		  .bg_img{
			  width: 100%;
			  height: 184px;
		  }
		.header{
			width: 355px;
			height: 116px;
			background-color: $white_color;
			border-radius: $radius_eight;
			box-sizing: border-box;
			position: absolute;
			left: calc(50% - 177.5px);
			top: 20px;
			padding: 10px;
			display: flex;
			.header_left{
				flex: 0.3;
				.avatar{
					width: 62px;
					height: 62px;
					margin: 0 auto;
					margin-top: 10px;
					.avatar_img{
						width: 62px;
						height: 62px;
						border-radius: 50%;
					}
				}
				.leavea{
					width: 61px;
					height: 27px;
					margin: 0 auto;
					margin-top: -5px;
					background-image: url('../../static/image/leave.png');
					background-size: 100% 100%;
					text-align: right;
					line-height: 27px;
					padding-right: 2px;
					color: $white_color;
				}
			}
			.header_right{
				flex: 0.7;
				.first{
					width: 100%;
					height: 20px;
					margin-top: 10px;
					display: flex;
					.first_left{
						flex: 0.9;
						font-size: $font-size-16;
						color: $black_color;
						font-weight: bold;
					}
					.first_right{
						flex: 0.1;
						.edit_img{
							width: 20px;
							height: 20px;
						}
					}
				}
				.second{
					width: 100%;
					height: 20px;
					margin-top: 10px;
					font-size: $font-size-14;
					color: $gray_color;
				}
				.third{
					width: 100%;
					height: 20px;
					margin-top: 10px;
					font-size: $font-size-14;
					color: $gray_color;
					.text{
						color: $primary_color;
						margin-left: 10px;
					}
				}
			}
		}
		.header_next{
			width: 355px;
			height: 74px;
			position: absolute;
			left: calc(50% - 177.5px);
			top: 150px;
			background-image: url('../../static/image/vip_img.png');
			.vip_btn{
				width: 100px;
				height: 40px;
				position: absolute;
				right: 20px;
				top: 20px;
				text-align: center;
				line-height: 40px;
				border-radius: $radius_60;
				background: linear-gradient(to right, #FEEAD8, #EECC9A);
			}
		}
	  }
		.item_list{
			width: 355px;
			height: 340px;
			margin: 0 auto;
			margin-top: $margin-top;
			border-radius: $radius_eight;
			background-color: $white_color;
			.item{
				width: 100%;
				height: 40px;
				margin-bottom: 10px;
				display: flex;
				.item_img{
					flex: 0.15;
					@include centerAline()
					.img_icon{
						width: 24px;
						height: 24px;
					}
				}
				.item_text{
					flex: 0.65;
					line-height: $line-height-40;
					font-size: $font-size-14;
					color: $black_color;
					font-weight: bold;
				}
				.item_right_img{
					flex: 0.2;
					@include centerAline()
					.right_img{
						width: 15px;
						height: 15px;
					}
				}
			}
		}
	}
  }
  .down {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 55px;
  }
}
</style>